<!--
 * @Description:
 * @Author: 
 * @Date: 2023-08-16 09:18:16
 * @LastEditor: 
 * @LastEditTime: 2023-08-16 09:18:17
 
-->


<template>
	<view class="page_content">
		<!-- #ifndef MP-TOUTIAO -->
		<view class="head_content">
			<CustomNavbar title=""></CustomNavbar>
		</view>
		<!-- #endif -->

		<view class="" style="margin: 100rpx 48rpx 0 48rpx;">
			<u--text text="Hi" :size="44" color="#ffffff"></u--text>
			<u--text :text="`欢迎来到${navbarTitle}~`" :size="24" color="#ffffff"></u--text>
		</view>
		<view class="main_content_register">
			<view class="login_title" style="text-align: center; font-size: 40rpx; line-height: 56rpx;">
				<text>注册账号</text>
			</view>
			<!-- <view class="logo">
				<image class="image" :src="config.system.company" mode="widthFix"></image>
			</view> -->
			<view class="input_box">
				<u-form ref="uForm" :model="form" :rules="rules">
					<u-form-item prop="mobile">
						<view class="input">
							<u-input v-model="form.mobile" type="text" clearable placeholder="请输入用户名"></u-input>
						</view>
					</u-form-item>
					<!--<u-form-item prop="code">
						<view class="input">
							<u-input v-model="form.code" type="number" clearable placeholder="请输入验证码">
								<template slot="suffix">
									<u-code ref="uCode" uniqueKey="register-code" :keepRunning="true" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
									<view class="codebtn" @click="getCode">{{ login.codeTips }}</view>
								</template>
							</u-input>
						</view>
					</u-form-item>-->
					<u-form-item prop="registerPassword">
						<view class="input">
							<u-input v-model="form.registerPassword" type="password" clearable
								placeholder="请输入字母+数字组合的密码"></u-input>
						</view>
					</u-form-item>
					<u-form-item prop="againPassword">
						<view class="input">
							<u-input v-model="form.againPassword" type="password" clearable
								placeholder="请再次输入密码"></u-input>
						</view>
					</u-form-item>
				</u-form>
			</view>
			<view class="button_box">
				<u-button text="注册" :loading="buttonLoading" :customStyle="buttonStyle" @click="submitHandle" />
			</view>
			<!--<view class="check_box">
				<u-checkbox-group @change="labelChange">
					<u-checkbox :name="true" label="阅读并同意" labelSize="28rpx" labelColor="#333"></u-checkbox>
				</u-checkbox-group>
				<text class="text">《服务协议》</text>
				<text>和</text>
				<text class="text">《隐私协议》</text>
			</view>-->
			<view class="text_info">
				<text class="text" @click="redirectPath">已有账号？去登录</text>
			</view>
		</view>
		<view >
			<u-popup :show="show" :closeable="true" mode="center" :round="10" @close="close" >
				<view class="ll" id="source" style="height: 400px;">
					<text style="color: aquamarine;color: red;">恭喜注册成功！</text>
					<text style="color: aquamarine;color: red;">清截图保存你的个人信息</text>

					<view
						style="margin-top:20rpx;text-align: center;font-size: 24rpx;background: #F0FFFB;border:2rpx solid #8AFCDA">
						<text style="margin-top: 20rpx;">账号：{{form.mobile}}</text>
						<text style="">密码： {{form.registerPassword}}</text>
					</view>
					<text style="font-size: 18rpx;color: #92D23D;">回家地址：{{host}}</text>
					<view
						style="display:flex;flex-direction: column;margin-top:20px;background:#EDFDD5;padding: 10rpx;">
						<view style="display:flex;flex-direction:column;text-align: left;">
							<text style="text-align: left;font-weight: 800;">使用方法:</text>
							<text style="font-size: 24rpx;line-height: 28rpx;color: #808080;">
								身份卡是除手机号/账号外，唯一恢复/切换账号的凭证，请保存并妥善保管，切勿丢失或泄露给他人
							</text>
						</view>
						<view style="display:flex;flex-direction:column;text-align: left;margin-top: 10rpx;">
							<text style="text-align: left;font-weight: 800;">温馨提示:</text>
							<text style="font-size: 24rpx;line-height: 28rpx;color: #808080;">
								请及时绑定账号，在下次登陆的时候可以使用绑定的账号和密码进行登陆即可！
							</text>
						</view>
					</view>
					<view style="margin-top: 20rpx;">
						<u-button type="primary" @click="jietu">截图保存</u-button>
					</view>

				</view>
			</u-popup>
		</view>


	</view>
</template>

<script>
	import {
		mapState,
		mapGetters,
		mapMutations,
		mapActions
	} from "vuex"
	import html2canvas from "html2canvas"
	export default {
		data() {
			return {
				navbarTitle: this.$store.state.app.title || '影视视频',
				show: false,
				host: '',
				buttonStyle: {
					width: '100%',
					height: '100rpx',
					border: 'none',
					fontSize: '28rpx',
					color: '#fff',
					background: 'linear-gradient(90deg, #2A82E4, #D269FF)',
					borderRadius: '20rpx',
					margin: '0',
					fontWeight: 'bold'
				},
				buttonLoading: false,
				login: {
					codeTips: '', // 验证码提示文字
					checked: false, // 协议勾选
					platform: this.$utils.platforms(), // 平台(H5 / wxMiniProgram / wxOfficialAccount)
				},
				form: {
					mobile: '', // 手机号
					code: '', // 验证码
					registerPassword: '', // 密码
					againPassword: '', // 确认密码
				},
				rules: {
					mobile: [{
							required: true,
							message: '请输入用户名',
							trigger: ['blur', 'change']
						},
						//		{
						//			validator: (rule, value, callback) => {
						//				return uni.$u.test.mobile(value);
						//			},
						//			message: '手机号码不正确',
						//			trigger: ['change', 'blur'],
						//		}
					],
					//code: [
					//	{ required: true, message: '请输入验证码', trigger: ['blur', 'change'] },
					//	{ min: 4, max: 6, message: '请输入4~6位验证码', trigger: ['blur', 'change'] }
					//],
					registerPassword: [{
						required: true,
						//message: '请输入字母+数字组合的密码',
						//	trigger: ['blur', 'change']
					}, ],
					againPassword: [{
						required: true,
						message: '请再次输入密码',
						trigger: ['blur', 'change']
					}, ]
				}
			}
		},
		computed: {
			...mapGetters('app', ['config', "share"])
		},
		onLoad() {
			this.host = window.location.hostname
		},
		onReady() {
			this.$nextTick(() => {
				this.$refs.uForm.setRules(this.rules)
			})
		},
		methods: {
			...mapActions('user', ['getUserInfo']),
			async jietu() {

				try {
					const element =document.querySelector('#source'); // 获取DOM元素
					////console.log("222",element)
					const canvas = await html2canvas(element,{
						width:element.clientWidth,
						height:'400',
						 scrollY: 0, // html2canvas默认绘制视图内的页面，需要把scrollY，scrollX设置为0
						 scrollX: 0,
						 useCORS: true, //支持跨域
						 // scale: 2, // 设置生成图片的像素比例，默认是1，如果生成的图片模糊的话可以开启该配置项
					});
					setTimeout(()=>{
						////console.log(canvas);
						 URL.revokeObjectURL(canvas.toDataURL('image/png'))
						////console.log(canvas.toDataURL('image/png'));
						this.downloads(canvas.toDataURL('image/png'),'身份卡')
						
					},2000)
					
				} catch (error) {
					////console.error('截图失败:', error);
				}


			},
			downloads(blob, name) {
							
							let a = document.createElement('a')
							a.style.display = 'none'
							a.download = name + '.png'
							a.href = blob
							a.click()
						},
			
			submitHandle() {
				//if (!this.login.checked) {
				//	this.$u.toast('请勾选并同意协议')
				//	return
				//	}
				this.$refs.uForm.validate().then(res => {
					const obj = {
						mobile: this.form.mobile,
						//	code: this.form.code,
						password: this.form.againPassword,
						platform: this.login.platform,
						//	spm: this.share.spm || ''
					}
					this.registerAccount(obj)
				}).catch(err => {
					////console.log(err, "验证未通过");
				})
			},
			close() {
				this.show = false
				this.redirectPath(2)
			},
			// 1.注册账号
			registerAccount(obj) {
				this.$request('login.register', obj).then(res => {
					if (res.code === 1) {
						//this.$u.toast("注册成功")
						this.user=res.data.nickname
						this.pwd=res.data.password
						this.getUserInfo(res.data.token)
						this.show = true

					}
				})
			},
			// 重定向页面
			redirectPath(count = 1) {
				const page = getCurrentPages()[0];
				if (page.route.indexOf('pages/login/register') == -1) {
					uni.navigateBack({
						delta: Number(count)
					})
				} else {
					uni.switchTab({
						url: '/pages/home/index'
					});
				}
			},
			labelChange(detail) {
				this.login.checked = detail[0] ? detail[0] : false
			},
			codeChange(text) {
				this.login.codeTips = text;
			},
			getCode() {
				if (!this.form.mobile) {
					this.$u.toast("请输入用户名")
					return
				}
				let obj = {
					mobile: this.form.mobile,
					event: 'register'
				}
				if (this.$refs.uCode.canGetCode) {
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$request('login.sendCode', obj, false).then(res => {
						if (res.code === 1) {
							uni.hideLoading();
							uni.$u.toast('验证码已发送');
							this.$refs.uCode.start();
						} else {
							uni.hideLoading();
							uni.$u.toast(res.msg);
						}
					}).catch(err => {
						uni.hideLoading();
						uni.$u.toast('验证码发送失败');
					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
	page {
		background-image: url("~@/static/images/login-bg.png");
		background-repeat: no-repeat;
		background-position: top;
		background-size: 100%;
	}
	/deep/ .u-popup__content {
		background: url('/static/images/background-green.png');
		background-size: 100% 100%;
		background-repeat: repeat;
		width: 80%;
		padding: 60rpx 0 0;
	}

	/deep/ .u-popup__content__close--top-right {
		background: #fff;
		padding: 10rpx;
		border-radius: 50%;
		top: -10rpx;
	}

	.ll {
		display: flex;
		flex-direction: column;
		padding: 60rpx 40rpx;
		text-align: center;
		line-height: 50rpx;

	}

	.main_content_register {
		margin: 144rpx 16rpx 68rpx 16rpx;
		background-color: #ffffff;
		padding: 64rpx 48rpx;
		border-radius: 32rpx;
		overflow-y: auto;

		// .logo {
		// 	width: 100%;
		// 	padding: 40rpx 100rpx 100rpx 100rpx;

		// 	.image {
		// 		width: 100%;
		// 	}
		// }

		.input_box {
			padding-top: 48rpx;
			::v-deep .u-form {
				.u-form-item__body {
					padding: 0 0 40rpx 0 !important;
				}

				.u-form-item__body__right__message {
					margin-left: 0 !important;
					line-height: 1.5em;
					font-size: 28rpx;
					padding: 0 10rpx 20rpx 10rpx;
				}
			}

			.input {
				width: 100%;

				::v-deep .u-input {
					height: 100rpx;
					background: #ffffff;
					border-radius: 16rpx;
					border: 1px solid #4A4A4A1A;
					padding: 12rpx 24rpx !important;
				}

				.codebtn {
					font-size: 28rpx;
					color: #333;
				}
			}
		}

		.button_box {
			margin: 24rpx 0;
		}

		.check_box {
			display: flex;
			align-items: center;
			font-size: 28rpx;

			.text {
				color: #583EF2;
			}
		}

		.text_info {
			margin-top: 60rpx;
			text-align: center;

			.text {
				color: #4a4a4a;
				opacity: 0.5;
				font-size: 28rpx;
			}
		}
	}
</style>